<template>
	<view class="temp">
		<view class="accContent">
			<view class="deletionCon" v-if="step==1">
				<view class="one">
					<view class="iconfont icon-gantanhao1">
					</view>
					<text>账号注销风险</text>
				</view>
				<view class="two">
					<text>无法登录</text>
					<text>一旦注销，你将无法使用该帐号登录相关服务平台</text>
					<text>注：请先确保所有交易已完成且无纠纷，帐号删除后历史交易产生的资金、权益等将视为自动放弃</text>
				</view>
			</view>
			<view class="deletionCon2" v-else>
				<view class="d2One">
					<text>请完成以下验证</text>
					<text>请输入185****9999收到的短信验证码</text>
				</view>
				<view class="d2Two">
					<u-input placeholder="请输入验证码" :customStyle="accountCustomStyle" border="none">
						<template slot="suffix">
							<text class="getCodeBtn" :class="{ disabled: countdown > 0 }" @tap="startCountdown">
								{{ countdown > 0 ? `重新发送${countdown}s` : '获取验证码' }}
							</text>
						</template>
					</u-input>
				</view>
			</view>
		</view>
		<view class="commonBtn">
			<view class="btnCon" :class="countdown == 0 && step==2?'btnConDisable':''" @tap="deletion">
				<text>申请注销</text>
			</view>
		</view>
		<!-- 注销弹窗 -->
		<u-popup :show="showPop" mode="center" round="12" @close="showPop=false">
			<view class="canclePop">
				<text class="ccTitle">确认要注销该账号吗</text>
				<view class="popBtn">
					<view class="left" @tap="showPop=false">
						<text>取消</text>
					</view>
					<view class="right">
						<text>确认</text>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				accountCustomStyle: {
					textIndent: '25rpx',
					backgroundColor: '#f5f7fa',
					borderRadius: '32rpx',
					height:"108rpx",
				},
				step: 1,
				showPop: false,
				countdown: 0,
				timer: null,
			}
		},
		onUnload() {
			if (this.timer) clearInterval(this.timer);
		},
		methods: {
			deletion() {
				this.step = 2
				if (this.countdown > 0) {
					this.showPop = true
				}
			},
			startCountdown() {
				if (this.countdown > 0) return;
				this.countdown = 60;
				this.timer = setInterval(() => {
					this.countdown--;
					if (this.countdown <= 0) {
						clearInterval(this.timer);
						this.timer = null;
					}
				}, 1000);
			},
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef H5 */
	page {
		position: relative;
		height: 100%;
		background-color: $page-color-base2;
	}

	/* #endif */

	.temp {
		position: relative;
		height: 100%;
		background-color: $page-color-base2;
	}

	.accContent {
		.deletionCon {
			.one {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 750rpx;
				height: 490rpx;
				background: rgba(255, 255, 255, 1);

				.iconfont {
					font-size: 144rpx;
					color: red;
				}

				text:nth-child(2) {
					margin-top: 48rpx;
					font-size: 40rpx;
					font-weight: 700;
					line-height: 57.92rpx;
					color: rgba(54, 68, 79, 1);
				}
			}

			.two {
				display: flex;
				flex-direction: column;
				margin: 20rpx 24rpx 0 40rpx;

				text:nth-child(1) {
					font-size: 32rpx;
					font-weight: 700;
					line-height: 46.34rpx;
					color: rgba(54, 68, 79, 1);
				}

				text:nth-child(2) {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 48rpx;
					color: rgba(54, 68, 79, 1);
					margin: 16rpx 0;
				}

				text:nth-child(3) {
					font-size: 28rpx;
					font-weight: 400;
					line-height: 48rpx;
					color: rgba(94, 103, 110, 1);
				}
			}
		}

		.deletionCon2 {
			padding: 0 40rpx;

			.d2One {
				position: relative;
				height: 116rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-start;
				align-items: flex-start;
				padding-top: 194rpx;

				text:nth-child(1) {
					font-size: 40rpx;
					font-weight: 400;
					line-height: 57.92rpx;
					color: rgba(94, 103, 110, 1);
				}

				text:nth-child(2) {
					margin-top: 16rpx;
					font-size: 28rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 40.54rpx;
					color: rgba(152, 160, 166, 1);
				}
			}

			.d2Two {
				margin-top: 60rpx;
			}
		}

		.getCodeBtn {
			margin: 8rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			width: 240rpx;
			height: 92rpx;
			border-radius: 32rpx;
			background: rgba(255, 255, 255, 1);
			font-size: 30rpx;
			font-weight: 400;
			line-height: 43.44rpx;
			color: rgba(54, 68, 79, 1);
		}

		.getCodeBtn.disabled {
			color: rgba(201, 205, 212, 1);
		}

		.canclePop {
			position: relative;
			width: 640rpx;
			border-radius: 24rpx;
			background: rgba(255, 255, 255, 1);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding-top: 64rpx;

			.ccTitle {
				height: 48rpx;
				font-size: 32rpx;
				font-weight: bold;
				letter-spacing: 0rpx;
				line-height: 48rpx;
				color: rgba(54, 68, 79, 1);
			}

			.ccDec {
				margin-top: 16rpx;
				font-size: 32rpx;
				font-weight: 400;
				line-height: 48rpx;
				color: rgba(94, 103, 110, 1);
			}

			.popBtn {
				position: relative;
				border-top: 2rpx solid #f5f5f5;
				width: 100%;
				height: 112rpx;
				margin-top: 66rpx;
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 50%;
					border-right: 2rpx solid #f5f5f5;
					font-size: 32rpx;
					font-weight: 400;
					letter-spacing: 0rpx;
					line-height: 48rpx;
					color: rgba(94, 103, 110, 1);
				}

				.right {
					@extend .left;
					border-right: none;
					color: rgba(255, 85, 77, 1);
				}
			}
		}

		.btnConDisable {
			background: rgba(68, 212, 168, 0.5) !important;
		}
	}
</style>